import React, { useEffect } from 'react'
import { motion } from 'framer-motion'
import { BookOpen, Star, Calendar, Users, TrendingUp, Heart } from 'lucide-react'
import { Link } from 'react-router-dom'
import { useStore } from '../stores/appStore'
import { cn } from '../utils/cn'

const Home: React.FC = () => {
  const { setFeaturedBooks, setNewBooks, setActivities } = useStore()

  // 模拟数据
  const featuredBooks = [
    {
      id: '1',
      title: '小熊宝宝绘本',
      author: '佐佐木洋子',
      cover: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20little%20bear%20character%20in%20warm%20children%20book%20illustration%20style%20soft%20colors%20gentle%20lighting&image_size=portrait_4_3',
      description: '培养宝宝良好习惯的温馨绘本',
      ageRange: [0, 3] as [number, number],
      category: '习惯养成',
      tags: ['习惯', '动物', '温馨'],
      rating: 4.8,
      price: 28.8,
      isFree: false,
      pages: 24
    },
    {
      id: '2',
      title: '彩虹色的花',
      author: '麦克·格雷涅茨',
      cover: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=colorful%20rainbow%20flower%20in%20children%20book%20illustration%20style%20bright%20colors%20whimsical%20art%20style&image_size=portrait_4_3',
      description: '关于分享与友爱的美丽故事',
      ageRange: [3, 6] as [number, number],
      category: '情感教育',
      tags: ['分享', '友爱', '自然'],
      rating: 4.9,
      price: 0,
      isFree: true,
      pages: 32
    },
    {
      id: '3',
      title: '我爸爸',
      author: '安东尼·布朗',
      cover: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=father%20and%20child%20illustration%20in%20children%20book%20style%20warm%20family%20moment%20soft%20colors&image_size=portrait_4_3',
      description: '表达对爸爸深深的爱',
      ageRange: [2, 5] as [number, number],
      category: '亲情',
      tags: ['爸爸', '亲情', '温馨'],
      rating: 4.7,
      price: 32.0,
      isFree: false,
      pages: 28
    }
  ]

  const newBooks = [
    {
      id: '4',
      title: '好饿的毛毛虫',
      author: '艾瑞·卡尔',
      cover: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20caterpillar%20in%20children%20book%20illustration%20style%20bright%20colors%20whimsical%20art&image_size=portrait_4_3',
      description: '经典洞洞书，认识数字和食物',
      ageRange: [1, 4] as [number, number],
      category: '认知',
      tags: ['数字', '食物', '洞洞书'],
      rating: 4.9,
      price: 35.0,
      isFree: false,
      pages: 26
    },
    {
      id: '5',
      title: '猜猜我有多爱你',
      author: '山姆·麦克布雷尼',
      cover: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=loving%20rabbits%20in%20children%20book%20illustration%20style%20soft%20pastel%20colors%20tender%20moment&image_size=portrait_4_3',
      description: '关于爱的表达的经典绘本',
      ageRange: [2, 6] as [number, number],
      category: '亲情',
      tags: ['爱', '兔子', '温馨'],
      rating: 4.8,
      price: 29.9,
      isFree: false,
      pages: 30
    }
  ]

  const activities = [
    {
      id: '1',
      title: '周末亲子绘本故事会',
      description: '专业老师带领，分享精彩绘本故事',
      image: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=children%20storytelling%20session%20in%20cozy%20library%20setting%20warm%20lighting%20parents%20and%20kids%20sitting%20together&image_size=landscape_16_9',
      date: '2024-01-20',
      location: '绘本岛体验中心',
      price: 0,
      maxParticipants: 20,
      currentParticipants: 15,
      category: '故事会'
    },
    {
      id: '2',
      title: '亲子手工制作课',
      description: '和孩子一起制作绘本主题手工',
      image: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=parents%20and%20children%20doing%20craft%20activities%20together%20colorful%20art%20supplies%20happy%20family%20moment&image_size=landscape_16_9',
      date: '2024-01-27',
      location: '创意工坊',
      price: 68,
      maxParticipants: 15,
      currentParticipants: 8,
      category: '手工课'
    }
  ]

  useEffect(() => {
    // 设置模拟数据
    setFeaturedBooks(featuredBooks)
    setNewBooks(newBooks)
    setActivities(activities)
  }, [setFeaturedBooks, setNewBooks, setActivities, featuredBooks, newBooks, activities])

  const BookCard: React.FC<{ book: any; size?: 'small' | 'medium' | 'large' }> = ({ book, size = 'medium' }: { book: any; size?: 'small' | 'medium' | 'large' }) => {
    const sizeClasses = {
      small: 'w-32',
      medium: 'w-40',
      large: 'w-48'
    }

    return (
      <Link to={`/books/${book.id}`}>
        <motion.div
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          className={cn(
            sizeClasses[size],
            "bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group"
          )}
        >
          <div className="aspect-[3/4] relative overflow-hidden">
            <img
              src={book.cover}
              alt={book.title}
              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
            />
            {book.isFree && (
              <div className="absolute top-2 right-2 bg-leaf-500 text-white px-2 py-1 rounded-full text-xs font-bold">
                免费
              </div>
            )}
          </div>
          <div className="p-3">
            <h3 className="font-bold text-gray-800 text-sm mb-1 line-clamp-1">{book.title}</h3>
            <p className="text-xs text-gray-600 mb-2">{book.author}</p>
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-1">
                <Star className="w-3 h-3 text-yellow-400 fill-current" />
                <span className="text-xs text-gray-600">{book.rating}</span>
              </div>
              <span className="text-xs font-bold text-primary-600">
                {book.isFree ? '免费' : `¥${book.price}`}
              </span>
            </div>
            <div className="mt-2 flex flex-wrap gap-1">
              {book.tags.slice(0, 2).map((tag: string) => (
                <span key={tag} className="text-xs bg-primary-50 text-primary-600 px-2 py-1 rounded-full">
                  {tag}
                </span>
              ))}
            </div>
          </div>
        </motion.div>
      </Link>
    )
  }

  const ActivityCard: React.FC<{ activity: any }> = ({ activity }: { activity: any }) => {
    return (
      <motion.div
        whileHover={{ scale: 1.02 }}
        className="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden"
      >
        <div className="aspect-video relative overflow-hidden">
          <img
            src={activity.image}
            alt={activity.title}
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
          <div className="absolute bottom-4 left-4 text-white">
            <h3 className="font-bold text-lg">{activity.title}</h3>
          </div>
        </div>
        <div className="p-4">
          <p className="text-gray-600 text-sm mb-3">{activity.description}</p>
          <div className="space-y-2 text-sm">
            <div className="flex items-center space-x-2">
              <Calendar className="w-4 h-4 text-primary-500" />
              <span>{activity.date}</span>
            </div>
            <div className="flex items-center space-x-2">
              <Users className="w-4 h-4 text-primary-500" />
              <span>{activity.currentParticipants}/{activity.maxParticipants} 人</span>
            </div>
          </div>
          <div className="mt-4 flex items-center justify-between">
            <span className="text-lg font-bold text-primary-600">
              {activity.price === 0 ? '免费' : `¥${activity.price}`}
            </span>
            <button className="px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-full hover:from-primary-600 hover:to-primary-700 transition-all duration-200">
              立即报名
            </button>
          </div>
        </div>
      </motion.div>
    )
  }

  return (
    <div className="space-y-8">
      {/* 欢迎横幅 */}
      <motion.section
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="bg-gradient-to-r from-primary-100 via-sky-50 to-leaf-50 rounded-3xl p-8 text-center relative overflow-hidden"
      >
        <div className="relative z-10">
          <h1 className="text-4xl font-bold text-primary-800 mb-4">
            欢迎来到绘本岛
          </h1>
          <p className="text-lg text-primary-700 mb-6">
            让亲子时光，更温暖一点
          </p>
          <div className="flex justify-center space-x-4">
            <button className="px-6 py-3 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-full hover:from-primary-600 hover:to-primary-700 transition-all duration-200 shadow-lg">
              开始阅读
            </button>
            <button className="px-6 py-3 bg-white text-primary-600 rounded-full hover:bg-primary-50 transition-all duration-200 border-2 border-primary-200">
              了解更多
            </button>
          </div>
        </div>
        {/* 装饰元素 */}
        <div className="absolute top-4 right-4 w-16 h-16 bg-leaf-200 rounded-full opacity-30 animate-float"></div>
        <div className="absolute bottom-4 left-4 w-12 h-12 bg-sky-200 rounded-full opacity-40 animate-float" style={{animationDelay: '1s'}}></div>
      </motion.section>

      {/* 热门推荐 */}
      <section>
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-2xl font-bold text-gray-800 flex items-center">
            <TrendingUp className="w-6 h-6 text-primary-500 mr-2" />
            热门推荐
          </h2>
          <Link to="/books" className="text-primary-600 hover:text-primary-700 font-medium">
            查看更多 →
          </Link>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          {featuredBooks.map((book) => (
            <BookCard key={book.id} book={book} size="large" />
          ))}
        </div>
      </section>

      {/* 新书上架 */}
      <section>
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-2xl font-bold text-gray-800 flex items-center">
            <BookOpen className="w-6 h-6 text-leaf-500 mr-2" />
            新书上架
          </h2>
          <Link to="/books" className="text-leaf-600 hover:text-leaf-700 font-medium">
            查看更多 →
          </Link>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
          {newBooks.map((book) => (
            <BookCard key={book.id} book={book} size="medium" />
          ))}
        </div>
      </section>

      {/* 亲子活动 */}
      <section>
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-2xl font-bold text-gray-800 flex items-center">
            <Calendar className="w-6 h-6 text-sky-500 mr-2" />
            亲子活动
          </h2>
          <Link to="/activities" className="text-sky-600 hover:text-sky-700 font-medium">
            查看更多 →
          </Link>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {activities.map((activity) => (
            <ActivityCard key={activity.id} activity={activity} />
          ))}
        </div>
      </section>

      {/* 特色功能介绍 */}
      <section className="bg-white rounded-3xl p-8 shadow-lg">
        <h2 className="text-2xl font-bold text-center text-gray-800 mb-8">为什么选择绘本岛</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="text-center">
            <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <BookOpen className="w-8 h-8 text-primary-600" />
            </div>
            <h3 className="text-lg font-bold text-gray-800 mb-2">精选绘本</h3>
            <p className="text-gray-600">严格筛选优质绘本，确保每一本都值得阅读</p>
          </div>
          <div className="text-center">
            <div className="w-16 h-16 bg-sky-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Users className="w-8 h-8 text-sky-600" />
            </div>
            <h3 className="text-lg font-bold text-gray-800 mb-2">亲子共读</h3>
            <p className="text-gray-600">专业的亲子阅读指导，让阅读更有意义</p>
          </div>
          <div className="text-center">
            <div className="w-16 h-16 bg-leaf-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Heart className="w-8 h-8 text-leaf-600" />
            </div>
            <h3 className="text-lg font-bold text-gray-800 mb-2">成长记录</h3>
            <p className="text-gray-600">记录孩子的阅读成长轨迹，见证每一步进步</p>
          </div>
        </div>
      </section>
    </div>
  )
}

export default Home